<template>
  <div class="material-management">
    <div class="filter-container">
      <div class="status-filter">
        <button
          v-for="status in statusOptions"
          :key="status.value"
          @click="changeStatus(status.value)"
          :class="{ active: currentStatus === status.value }"
        >
          {{ status.label }}
        </button>
      </div>
      
      <div class="pagination">
        <button
          @click="prevPage"
          :disabled="currentPage === 1"
        >
          上一页
        </button>
        <span class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
        <button
          @click="nextPage"
          :disabled="currentPage === totalPages"
        >
          下一页
        </button>
      </div>
    </div>
    
    <div class="material-list">
      <div class="material-card" v-for="item in paginatedData" :key="item.id">
        <div class="card-header">
          <h3 class="card-title">{{ item.customer_name }} - {{ item.type }}</h3>
          <span class="status-badge" :class="getStatusClass(item)">{{ getStatusText(item) }}</span>
        </div>
        
        <div class="card-content">
          <div class="info-row">
            <span class="label">订单号:</span>
            <span class="value">{{ item.order_number }}</span>
          </div>
          <div class="info-row">
            <span class="label">日期:</span>
            <span class="value">{{ formatDateRange(item.start_date, item.end_date) }}</span>
          </div>
          <div class="info-row">
            <span class="label">摄影师:</span>
            <span class="value">{{ item.member_name || '未分配' }}</span>
          </div>
        </div>
        
        <div class="card-actions">
          <button 
            v-if="item.has_material !== '1'"
            class="secondary-btn"
            @click="showDialog('upload', item)"
          >
            <span>上传素材</span>
          </button>
          <button 
            v-else
            class="secondary-btn"
            @click="showDialog('material', item)"
          >
            <span>查看素材</span>
          </button>
          <button 
            class="primary-btn"
            @click="showDialog('detail', item)"
          >
            <span>查看详情</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M5 12h14M12 5l7 7-7 7"/>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <MaterialsDialog
      v-if="showDialogFlag"
      :type="dialogType"
      :item="currentItem"
      @close="closeDialog"
      @submit="handleDialogSubmit"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { get } from "@/request"
import MaterialsDialog from './MaterialsDialog.vue'

// 状态选项
const statusOptions = [
  { value: 'all', label: '全部' },
  { value: 'pending', label: '待提交' },
  { value: 'submitted', label: '已提交' }
]

// 当前选中的状态
const currentStatus = ref('all')

// 当前页码
const currentPage = ref(1)
// 每页显示数量
const pageSize = ref(12)

// 弹窗控制
const showDialogFlag = ref(false)
const dialogType = ref('') // 'upload' | 'material' | 'detail'
const currentItem = ref({})

// 订单数据
const orders = ref([])

// 获取订单数据
const fetchOrders = async () => {
  try {
    const res = await get("/order/list")
    if (res && res.code === 200) {
      orders.value = res.data?.list || res.data?.items || []
    }
  } catch (error) {
    console.error('获取订单列表失败:', error)
  }
}

// 格式化日期范围
const formatDateRange = (startDate, endDate) => {
  if (startDate === endDate) return startDate
  return `${startDate} 至 ${endDate}`
}

// 获取状态文本
const getStatusText = (item) => {
  return item.has_material === '1' ? '已提交' : '待提交'
}

// 获取状态类名
const getStatusClass = (item) => {
  return item.has_material === '1' ? 'submitted' : 'pending'
}

// 改变状态筛选
const changeStatus = (status) => {
  currentStatus.value = status
  currentPage.value = 1 // 切换状态时重置页码
}

// 获取筛选后的数据
const filteredData = computed(() => {
  if (currentStatus.value === 'all') return orders.value
  return orders.value.filter(item => {
    return currentStatus.value === 'submitted' 
      ? item.has_material === '1' 
      : item.has_material !== '1'
  })
})

// 分页数据
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredData.value.slice(start, end)
})

// 总页数
const totalPages = computed(() => {
  return Math.ceil(filteredData.value.length / pageSize.value)
})

// 上一页
const prevPage = () => {
  if (currentPage.value > 1) currentPage.value--
}

// 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) currentPage.value++
}

// 显示弹窗
const showDialog = (type, item) => {
  dialogType.value = type
  currentItem.value = item
  showDialogFlag.value = true
}

// 关闭弹窗
const closeDialog = () => {
  showDialogFlag.value = false
}

// 处理弹窗提交
const handleDialogSubmit = (updatedItem) => {
  const index = orders.value.findIndex(item => item.id === updatedItem.id)
  if (index !== -1) {
    orders.value[index] = updatedItem
  }
  closeDialog()
}

// 组件挂载时获取数据
onMounted(() => {
  fetchOrders()
})
</script>

<style lang="less" scoped>
.material-management {
  padding: 20px;
  background-color: var(--bs-bg-color);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.filter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-filter {
  display: flex;
  gap: 10px;
  
  button {
    padding: 8px 16px;
    border: 1px solid var(--bs-border-color);
    background-color: white;
    color: var(--bs-nav-link-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    
    &.active {
      background-color: var(--bs-theme-color);
      color: white;
      border-color: var(--bs-theme-color);
    }
  }
}

.material-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.material-card {
  background-color: white;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.card-title {
  font-size: 16px;
  color: var(--bs-dark-color);
  margin: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.status-badge {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  margin-left: 10px;
  white-space: nowrap;
  
  &.pending {
    background-color: #FFF3E0;
    color: #FF9800;
  }
  
  &.submitted {
    background-color: var(--bs-bg-color);
    color: var(--bs-shadow-color);
  }
}

.card-content {
  flex: 1;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
  
  .label {
    color: var(--bs-gray-color);
    margin-right: 8px;
    width: 60px;
  }
  
  .value {
    color: var(--bs-text-color);
  }
}

.card-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.primary-btn,
.secondary-btn {
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
}

.primary-btn {
  background-color: white;
  border: 1px solid var(--bs-theme-color);
  color: var(--bs-theme-color);
  
  &:hover {
    background-color: var(--bs-light-color);
    color: var(--bs-bg-color);
  }
}

.secondary-btn {
  background-color: white;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-text-color);
  
  &:hover {
    border-color: var(--bs-gray-color);
  }
}

.pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  
  button {
    padding: 8px 16px;
    background-color: white;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-link-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover:not(:disabled) {
      background-color: #fff;
      border-color: var(--bs-shadow-color);
    }
    
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}

.page-info {
  color: var(--bs-text-color);
  font-size: 14px;
}
</style>